import React from 'react';
import {Card,Form,Input,Button,message,Icon, Checkbox} from 'antd';
const FormItem = Form.Item;

class FormLogin extends React.Component{
  handelSubmit=()=>{
    let userInfo=this.props.form.getFieldsValue();
    this.props.form.validateFields((err,values)=>{
      if(!err){
        message.success(`${userInfo.userName}恭喜你，登录验证成功，密码为${userInfo.userPwd}`);
      }
    })
  }

  render(){
    const {getFieldDecorator} = this.props.form;

    return (
      <div>
        <Card title="登录行内表单" style={{marginBottom:10}}>
          <Form layout="inline">
            <FormItem>
              <Input placeholder="请输入用户名"></Input>
            </FormItem>
            <FormItem>
            <Input placeholder="请输入密码"></Input>
            </FormItem>
            <FormItem>
              <Button type="primary">登录</Button>
            </FormItem>
          </Form>
        </Card>
        <Card title="登录水平表单">
          <Form layout="horizontal" style={{width:300}}>
            <FormItem>
              {
                getFieldDecorator('userName',{
                  initialValue:'Jeck',
                  rules:[
                    {
                      required:true,
                      message:'用户名不能为空'
                    },
                    {
                      min:5,max:10,
                      message:'长度不在范围内'
                    }
                  ]
                })(
                  <Input prefix={<Icon type="user"/>} placeholder="请输入用户名"></Input>
                )
              }   
            </FormItem>
            <FormItem>
              {
                getFieldDecorator('userPwd',{
                  initialValue:'123456',
                  rules:[
                    {
                      pattern:new RegExp('^\\w+$','g'),
                      message:'密码必须为应为字母和数字'
                    }
                  ]
                })(
                  <Input prefix={<Icon type="lock"/>} placeholder="请输入密码"></Input>
                )
              }   
            </FormItem>
            <FormItem>
              {
                getFieldDecorator('remeber',{
                  valuePropName:'checked',
                  initialValue:true,
                })(
                  <Checkbox>记住密码</Checkbox>
                )
              }
              <a href="#" style={{float:'right'}}>忘记密码</a>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handelSubmit}>登录</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    );
  }
}

export default Form.create()(FormLogin);